<template>
  <div>
    <div class="container">
      <div class="clearfix">
        <span class="pull-right">
          <el-button @click="showRight=true" size="small">增加</el-button>
        </span>
      </div>
      <el-row :gutter="15">
        <el-col :span="4" v-for="(o, index) in 2" :key="o" style="margin-top:15px">
          <router-link :to="pathUrl+'show/'+index">
            <el-card :body-style="{ padding: '0px' }">
              <img src="../../assets/img/hamburger.png" class="image">
              <div style="padding: 14px;">
                <span>故事{{index}}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>
                </div>
              </div>
            </el-card>
          </router-link>
        </el-col>
      </el-row>

    </div>
    <page-right :show="showRight" @right-close="resetRightBox">
      <edit-form :formItem="form" :title="formTitle" :action="action"
                 @close="showRight=false"
                 @change="itemChange"></edit-form>
    </page-right>
  </div>
</template>

<script>
  import editForm from './form/form.vue';

  export default {
    components: {editForm},
    data() {
      return {
        currentDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
        menu: [],
        showRight: false,
        formTitle: '新增',
        action: 'add',
        form: {}
      };
    },
    computed: {
      pathUrl: function () {
        let path = this.$route.path;
        return path.substr(0, path.lastIndexOf('/') + 1);
      }
    },
    methods: {
      resetRightBox() {
        this.showRight = false;
      },
      itemChange: function (e) {

      }
    }
  };

</script>
